<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" title="滑过提示文字" id="box">内容文本</div>

    <ul>
        <li>列表1</li>
        <li><!--列表2--></li>
        <li>列表3</li>
    </ul>
    <script>
        
        // 节点属性 有三个
            //             nodeName 节点名称   nodeType 节点类型    节点值 nodeValue
            // 元素节点        大写标签名             1                 null
            // 属性节点          属性名               2                属性值
            // 文本节点          #text                3                文本内容
            // 注释节点          #comment             8                注释内容
            // 文档节点          #document            9                 null

        var box = document.querySelector(".box");
        console.log( `元素节点的节点名称是${box.nodeName}` )
        console.log( `元素节点的节点类型是${box.nodeType}` )
        console.log( `元素节点的节点值是${box.nodeValue}` )

        var attr = box.attributes[1];
        console.log(attr)
        console.log( `属性节点的节点名称是${attr.nodeName}` )
        console.log( `属性节点的节点类型是${attr.nodeType}` )
        console.log( `属性节点的节点值是${attr.nodeValue}` )


        var text = box.firstChild;
        console.log( `文本节点的节点名称是${text.nodeName}` )
        console.log( `文本节点的节点类型是${text.nodeType}` )
        console.log( `文本节点的节点值是${text.nodeValue}` )

        var zs = box.nextElementSibling.firstElementChild.nextElementSibling.firstChild;
        console.log(zs)
        console.log( `注释节点的节点名称是${zs.nodeName}` )
        console.log( `注释节点的节点类型是${zs.nodeType}` )
        console.log( `注释节点的节点值是${zs.nodeValue}` )

        console.log( `文档节点的节点名称是${document.nodeName}` )
        console.log( `文档节点的节点类型是${document.nodeType}` )
        console.log( `文档节点的节点值是${document.nodeValue}` )

        console.log(box.className)
        box.className = "wrap container hhh"
    </script>
</body>
</html>